<template>
  <div class="quxunqiloufang-container">
    <div class="left-panel">
      <div class="year-panel">
        <h3 class="panel-title">管理年度</h3>
        <div class="year-list">
          <div v-for="year in yearList" :key="year.value" :class="[
              'year-item',
              { active: selectedYear.value === year.value },
            ]" @click="handleYearChange(year)">
            <span class="year-text">{{ year.label }}</span>
            <span class="year-count">({{ year.count || 0 }})</span>
          </div>
        </div>
      </div>
    </div>
    <div class="right-panel">
      <!-- 页面查询条件 -->
      <div class="page-content">
        <div class="header-section">
          <div class="form-row">
            <div class="form-item">
              <label>时间：</label>
              <el-date-picker v-model="listQuery.value" type="daterange" range-separator="至" start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </div>
          </div>
        </div>

        <!-- 操作按钮区域 -->
        <div class="operation-section">


          <div class="right-buttons">
            <button @click="handeDaochu" class="search-btn">导出</button>

            <button @click="handleSearch" class="search-btn">查询</button>
            <button @click="handleReset" class="reset-btn">重置</button>
          </div>

          <div class="allNum">
            <div class="allList" style="line-height: 40px;">合计：</div>
            <div class="allList">本次漏房数： <div>{{hejidata.count1}}</div>
            </div>
            <div class="allList">总维修数： <div>{{hejidata.count2}}</div>
            </div>
            <div class="allList">排险数： <div>{{hejidata.count3}}</div>
            </div>
            <div class="allList">排险车次： <div>{{hejidata.count4}}</div>
            </div>
            <div class="allList">排险人次： <div>{{hejidata.count5}}</div>
            </div>



          </div>
        </div>

        <!-- 数据表格 -->
        <div class="table-section">
          <table class="data-table">
            <thead>
              <tr>
                <th rowspan="2" class="center-cell">
                  <input type="checkbox" />
                </th>
                <th rowspan="2" class="center-cell">序号</th>
                <th rowspan="2" class="center-cell">统计时间</th>
                <!-- <th rowspan="2" class="center-cell">区域</th> -->
                <th colspan="2" class="center-cell">漏房及维修统计（处）</th>
                <th colspan="3" class="center-cell">应急抢险排险（处）</th>
                <th rowspan="2" class="center-cell">抢修情况</th>
                <th rowspan="2" class="center-cell">操作</th>
              </tr>
              <tr>
                <th class="center-cell">本次漏房数</th>
                <!-- <th class="center-cell">已维修数</th>
                <th class="center-cell">上次雨后漏房维修数</th> -->
                <th class="center-cell">总维修数</th>
                <th class="center-cell">排险数</th>
                <th class="center-cell">排险车次</th>
                <th class="center-cell">排险人次</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) in tableData" :key="item.id">
                <td class="center-cell"><input type="checkbox" /></td>
                <td class="center-cell">{{ index + 1 }}</td>
                <td class="center-cell">{{ item.statisticsDate }}</td>
                <!-- <td class="center-cell">{{ item.districtName }}</td> -->
                <td class="center-cell">{{ item.count1 }}</td>
                <!-- <td class="center-cell">{{ item.count2 }}</td>
                <td class="center-cell">{{ item.count3 }}</td> -->
                <td class="center-cell">{{ item.count2 + item.count3 }}</td>
                <td class="center-cell">{{ item.count4 }}</td>
                <td class="center-cell">{{ item.count5 }}</td>
                <td class="center-cell">{{ item.count6 }}</td>
                <td class="center-cell">{{ item.descContent }}</td>
                <td class="operation-column">
                  <button @click="handleView(item)" class="operation-btn view-btn">
                    详情
                  </button>
                </td>
              </tr>
              <tr v-if="tableData.length === 0">
                <td colspan="11" class="no-data">暂无数据</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      <!-- 分页 -->
      <div class="publicpaginationview">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="listQuery.pageNum" background :page-sizes="[10, 20, 50, 100]" :page-size="listQuery.pageSize"
          layout="total, sizes, prev, pager, next, jumper" :total="total" small>
        </el-pagination>
      </div>
    </div>

    <!-- 详情弹窗 -->
    <div v-if="showDetailDialog" class="dialog-overlay" @click="handleCloseDetailDialog">
      <div class="dialog-content detail-dialog" @click.stop>
        <div class="dialog-header">
          <h3>详情信息</h3>
          <button @click="handleCloseDetailDialog" class="close-btn">×</button>
        </div>
        <div class="dialog-body">
          <div class="form-section">
            <div class="form-title">市内直管公房汛期漏房、排险汇总表</div>

            <!-- 主表信息 -->
            <!-- <div class="form-header-info">
              <div class="form-row">
                <div class="form-item form-item-half">
                  <label>单位：</label>
                  <span class="readonly-text">{{ detailData.unit }}</span>
                </div>
                <div class="form-item form-item-half">
                  <label>统计日期：</label>
                  <span class="readonly-text">{{ detailData.statisticsDate }}</span>
                </div>
              </div>
              <div class="form-row">
                <div class="form-item form-item-half">
                  <label>天气情况：</label>
                  <span class="readonly-text">{{ detailData.weather }}</span>
                </div>
                <div class="form-item form-item-half">
                  <label>汇总期间：</label>
                  <span class="readonly-text">{{ detailData.summaryPeriod }}</span>
                </div>
              </div>
              <div class="form-row">
                <div class="form-item form-item-full">
                  <label>汇总单位：</label>
                  <span class="readonly-text">{{ detailData.summaryUnit }}</span>
                </div>
              </div>
            </div> -->

            <!-- 明细表格 -->
            <div class="detail-table-section">
              <div class="detail-table-header">
                <span class="detail-table-title">区域明细信息</span>

                <el-button type="primary" @click="handeDaochu2" class="add-btn">导出</el-button>
              </div>

              <div class="detail-table-wrapper">
                <table class="detail-table">
                  <thead>
                    <tr>
                      <th rowspan="2" class="center-cell">序号</th>

                      <th rowspan="2" class="center-cell">区属</th>
                      <th colspan="3" class="center-cell">
                        漏房及维修统计（处）
                      </th>
                      <th colspan="3" class="center-cell">
                        应急抢险排险（处）
                      </th>
                      <th rowspan="2" class="center-cell">抢修情况</th>
                      <th rowspan="2" class="center-cell">备注</th>
                    </tr>
                    <tr>
                      <th class="center-cell">本次漏房数</th>
                      <th class="center-cell">已维修数</th>
                      <th class="center-cell">上次雨后漏房维修数</th>
                      <th class="center-cell">排险数</th>
                      <th class="center-cell">排险车次</th>
                      <th class="center-cell">排险人次</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr v-for="(item, index) in detailData.districtList" :key="index">
                      <td class="center-cell">{{ index + 1 }}</td>

                      <td class="center-cell">{{ item.districtName }}</td>
                      <td class="center-cell">{{ item.count1 }}</td>
                      <td class="center-cell">{{ item.count2 }}</td>
                      <td class="center-cell">{{ item.count3 }}</td>
                      <td class="center-cell">{{ item.count4 }}</td>
                      <td class="center-cell">{{ item.count5 }}</td>
                      <td class="center-cell">{{ item.count6 }}</td>
                      <td class="center-cell">{{ item.descContent }}</td>
                      <td class="center-cell">{{ item.note }}</td>
                    </tr>
                    <tr v-if="
                        !detailData.districtList ||
                        detailData.districtList.length === 0
                      ">
                      <td colspan="10" class="no-data">暂无区域数据</td>
                    </tr>
                    <!-- 合计行 -->
                    <tr v-if="
                        detailData.districtList &&
                        detailData.districtList.length > 0
                      " class="total-row">
                      <td class="center-cell">合计</td>
                      <td class="center-cell"></td>
                      <td class="center-cell"></td>

                      <td class="center-cell">
                        {{ getDetailDisplayTotal("count1") }}
                      </td>
                      <td class="center-cell">
                        {{ getDetailDisplayTotal("count2") }}
                      </td>
                      <td class="center-cell">
                        {{ getDetailDisplayTotal("count3") }}
                      </td>
                      <td class="center-cell">
                        {{ getDetailDisplayTotal("count4") }}
                      </td>
                      <td class="center-cell">
                        {{ getDetailDisplayTotal("count5") }}
                      </td>
                      <td class="center-cell">
                        {{ getDetailDisplayTotal("count6") }}
                      </td>
                      <td class="center-cell"></td>
                      <td class="center-cell"></td>
                      <!-- <td class="center-cell"></td> -->
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
        <div class="dialog-footer">
          <button @click="handleCloseDetailDialog" class="cancel-btn">
            关闭
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  statisticsYearList,
  detailCheckStatisticsDist,
  exportCheckStatisticsDist,
  detailListStatisticsDist,
  checkStatisticsAll
} from "@/api/safe/index";
import moment from "moment";
import * as XLSX from 'xlsx'
export default {
  name: "ShiXunqiLoufangPaixianTongji",
  data() {
    return {
      // 搜索表单

      selectedYear: new Date().getFullYear().toString(),
      yearList: [],
      // 表格数据
      tableData: [],

      // 分页数据
      listQuery: {
        pageNum: 1,
        pageSize: 10,
        value: null,
        year: "",
      },
      total: 0,
      listLoading: false,
      submitLoading: false,

      // 弹窗控制
      showDialog: false,
      showDetailDialog: false,
      dialogMode: "add", // add, edit

      // 表单数据
      formData: {
        id: null,
        unit: "",
        statisticsDate: "",
        weather: "",
        summaryPeriod: "",
        summaryUnit: "",
        districtList: [], // 区域明细列表
      },

      // 详情数据
      detailData: {},
      // 合计数据
      hejidata: {}
    };
  },

  computed: {
    // 弹窗标题
    dialogTitle() {
      return this.dialogMode === "add" ? "新增汇总" : "修改汇总";
    },
  },

  mounted() {
    this.loadData();
  },

  methods: {
    handleYearChange(year) {
      this.selectedYear = year;
      this.listQuery.year = year.value;
      this.listQuery.pageNum = 1;
      this.handleSearch();
      this.$message.success(`切换到${year.value}年数据`);
    },

    getYearList() {
      statisticsYearList()
        .then((response) => {
          if (response.code === 200) {
            this.yearList =
              response.data.map((item) => ({
                value: item.years,
                label: item.years + "年",
                count: item.count,
              })) || [];

            // 如果当前选中的年度不在列表中，选择第一个年度
            if (this.yearList.length > 0) {
              this.selectedYear = this.yearList[0];
              this.listQuery.year = this.selectedYear.value;
              this.handleSearch();
            }
          } else {
            this.$message.error(response.message || "获取年度列表失败");
          }
        })
        .catch((error) => {

          this.$message.error("获取年度列表失败");
        });
    },
    loadData() {
      this.getYearList();
    },

    handleSearch() {
      let startDate = null;
      let endDate = null;
      if (this.listQuery.value != null) {
        startDate = moment(this.listQuery.value[0]).format("YYYY-MM-DD");
        endDate = moment(this.listQuery.value[1]).format("YYYY-MM-DD");
      }
      const { pageSize, pageNum, year } = this.listQuery;
      detailCheckStatisticsDist({
        pageNum,
        pageSize,
        year,
        startDate,
        endDate,
      }).then((res) => {
        this.tableData = res.data.list;
        this.total = res.data.total;
      });

      checkStatisticsAll({ year }).then(res => {
        this.hejidata = res.data;
      })
    },

    handleReset() {
      this.listQuery.value = null;
      this.handleSearch();
    },

    handleView(item) {
      detailListStatisticsDist({ districtId: item.districtId, statisticsDate: item.statisticsDate, }).then((res) => {
        this.detailData = {
          districtList: [...res.data],
        };
        this.showDetailDialog = true;
      });
    },

    handleCloseDialog() {
      this.showDialog = false;
    },

    handleCloseDetailDialog() {
      this.showDetailDialog = false;
    },

    handeDaochu() {
      let outList = []
      this.tableData.forEach((item, index) => {
        outList.push({
          统计时间: item.statisticsDate,
          本次漏房数: item.count1,
          已维修数: item.count2,
          上次雨后漏房维修数: item.count3,
          排险数: item.count4,
          排险车次: item.count5,
          排险人次: item.count6,
          抢修情况: item.descContent,


        })
      })

      // 获取表格数据
      const data = outList
      // 转换数据为工作表
      const worksheet = XLSX.utils.json_to_sheet(data)
      // 创建新的工作簿
      const workbook = XLSX.utils.book_new()
      // 将工作表添加到工作簿
      XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')
      // 导出Excel文件
      XLSX.writeFile(workbook, '（市）汛期漏房及排查情况统计.xlsx')
    },


    handeDaochu2() {
      let outList = []
      this.detailData.districtList.forEach((item, index) => {
        outList.push({
          区属: item.districtName,
          本次漏房数: item.count1,
          已维修数: item.count2,
          上次雨后漏房维修数: item.count3,
          排险数: item.count4,
          排险车次: item.count5,
          排险人次: item.count6,
          抢修情况: item.descContent,
          备注: item.note

        })
      })

      // 获取表格数据
      const data = outList
      // 转换数据为工作表
      const worksheet = XLSX.utils.json_to_sheet(data)
      // 创建新的工作簿
      const workbook = XLSX.utils.book_new()
      // 将工作表添加到工作簿
      XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')
      // 导出Excel文件
      XLSX.writeFile(workbook, '市内直管公房汛期漏房、排险汇总表.xlsx')
    },

    handleSizeChange(val) {
      this.listQuery.pageNum = 1;
      this.listQuery.pageSize = val;
      this.handleSearch();
    },

    handleCurrentChange(val) {
      this.listQuery.pageNum = val;
      this.handleSearch();
    },

    getTableTotal(row, field) {
      if (!row.districtList) return 0;
      return row.districtList.reduce(
        (sum, item) => sum + (Number(item[field]) || 0),
        0
      );
    },

    getTableRepairSituation(row) {
      if (!row.districtList) return "暂无明细";
      return `共${row.districtList.length}个区域`;
    },

    // 计算明细合计（用于新增/编辑弹窗）
    getDetailTotal(field) {
      if (
        !this.formData.districtList ||
        this.formData.districtList.length === 0
      )
        return 0;
      return this.formData.districtList.reduce((sum, item) => {
        return sum + (Number(item[field]) || 0);
      }, 0);
    },

    // 计算详情页明细合计
    getDetailDisplayTotal(field) {
      if (
        !this.detailData.districtList ||
        this.detailData.districtList.length === 0
      )
        return 0;
      return this.detailData.districtList.reduce((sum, item) => {
        return sum + (Number(item[field]) || 0);
      }, 0);
    },
  },
};
</script>

<style scoped>
.quxunqiloufang-container {
  display: flex;
  height: 100%;
  box-sizing: border-box;
  padding-top: 10px;
}

.left-panel {
  width: 240px;
}

.year-panel {
  background: #fff;

  border: 1px solid #e4e7ed;
  padding: 0;
  overflow: hidden;
}

.panel-title {
  margin: 0;
  padding: 16px 20px;
  background: #f5f7fa;
  border-bottom: 1px solid #e4e7ed;
  font-size: 16px;
  font-weight: 500;
  color: #303133;
}

.year-list {
  padding: 0;
}

.year-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
  transition: all 0.2s;
}

.year-item:last-child {
  border-bottom: none;
}

.year-item:hover {
  background-color: #f5f7fa;
}

.year-item.active {
  background-color: #ecf5ff;
  color: #409eff;
}

.year-text {
  font-size: 14px;
  font-weight: 500;
}

.year-count {
  font-size: 12px;
  color: #909399;
  background: #f0f0f0;
  padding: 2px 8px;
  border-radius: 10px;
}

.year-item.active .year-count {
  background: #409eff;
  color: #fff;
}

/* 右侧面板样式 */
.right-panel {
  flex: 1;
  min-width: 0;
  background: #fff;
  margin-left: 5px;
  box-sizing: border-box;
  padding: 0.2667rem;
}

/* 页面内容区域 */
.page-content {
  background: #fff;
}

.page-content {
  background: #fff;
}

.header-section {
  margin-bottom: 20px;
}

.form-row {
  display: flex;
  align-items: center;
  gap: 50px;
  margin-bottom: 15px;
}

.form-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.form-item-half {
  flex: 1;
  min-width: 0;
}

.form-item-full {
  flex: 1 1 100%;
  min-width: 0;
}

.form-item label {
  font-weight: normal;
  color: #333;
  white-space: nowrap;
  font-size: 14px;
}

.form-item input {
  padding: 6px 10px;
  border: 1px solid #ccc;
  border-radius: 3px;
  width: 200px;
  font-size: 14px;
}

.form-item-half input,
.form-item-full input {
  flex: 1;
  width: auto;
  min-width: 200px;
}

.form-item-half .input-wrapper {
  flex: 1;
  min-width: 200px;
}

.form-item-full .input-wrapper {
  flex: 1;
  min-width: 200px;
}

.operation-section {
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  flex-direction: row-reverse;
  align-items: center;
}

.left-buttons,
.right-buttons {
  display: flex;
  gap: 10px;
}

.search-btn,
.reset-btn,
.add-btn {
  background: #1890ff;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  margin-right: 10px;
}

.reset-btn {
  background: #f5f5f5;
  color: #666;
  border: 1px solid #d9d9d9;
}

.table-section {
  border: 1px solid #d9d9d9;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  background: #fff;
}

.data-table th,
.data-table td {
  border: 1px solid #d9d9d9;
  padding: 8px 6px;
  text-align: center;
  vertical-align: middle;
  line-height: 1.4;
}

.data-table th {
  background: #fafafa;
  font-weight: 500;
  color: #333;
  font-size: 13px;
}

.center-cell {
  text-align: center;
}

.data-table tbody tr:nth-child(even) {
  background: #fafafa;
}

.data-table tbody tr:hover {
  background: #e6f7ff;
}

.no-data {
  color: #999;
  font-style: italic;
  padding: 20px;
}

.operation-column {
  white-space: nowrap;
  padding: 4px;
}

.operation-btn {
  padding: 2px 6px;
  margin: 0 1px;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  font-size: 12px;
}

.view-btn {
  background: #52c41a;
  color: white;
}

.edit-btn {
  background: #fa8c16;
  color: white;
}

.delete-btn {
  background: #ff4d4f;
  color: white;
}

.delete-btn:hover {
  background: #ff7875;
}

/* 输入框搜索图标和必填项 */
.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.search-icon {
  position: absolute;
  right: 8px;
  color: #666;
  font-size: 14px;
  pointer-events: none;
}

.required {
  color: #f56c6c;
  margin-left: 5px;
  font-weight: bold;
}

.readonly-text {
  color: #666;
  font-size: 14px;
  background: #f5f5f5;
  padding: 6px 10px;
  border-radius: 3px;
  border: 1px solid #e8e8e8;
  display: inline-block;
  min-width: 150px;
}

.form-item-half .readonly-text,
.form-item-full .readonly-text {
  flex: 1;
  min-width: 150px;
  width: auto;
}

/* 弹窗样式 */
.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.dialog-content {
  background: white;
  border-radius: 6px;
  width: 90%;
  max-width: 800px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.detail-dialog {
  max-width: 1200px;
  width: 95%;
}

.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  border-bottom: 1px solid #e8e8e8;
}

.dialog-header h3 {
  margin: 0;
  color: #333;
  font-size: 16px;
  font-weight: 500;
}

.close-btn {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #999;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-btn:hover {
  color: #666;
}

.dialog-body {
  padding: 24px;
}

.form-section {
  max-width: 100%;
}

.form-title {
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e8e8e8;
}

.form-header-info {
  background: #fafafa;
  padding: 16px;
  border-radius: 4px;
  margin-bottom: 20px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid #e8e8e8;
  background: #fafafa;
}

.cancel-btn {
  background: #fff;
  color: #666;
  border: 1px solid #d9d9d9;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.cancel-btn:hover {
  background: #f5f5f5;
  border-color: #40a9ff;
}

.save-btn {
  background: #1890ff;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.save-btn:hover {
  background: #40a9ff;
}

/* 明细表格样式 */
.detail-table-section {
  margin-top: 20px;
}

.detail-table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding: 10px 0;
  border-bottom: 1px solid #e8e8e8;
}

.detail-table-title {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.add-detail-btn {
  background: #1890ff;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}

.add-detail-btn:hover {
  background: #40a9ff;
}

.detail-table-wrapper {
  max-height: 400px;
  overflow-y: auto;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
}

.detail-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  background: #fff;
}

.detail-table th,
.detail-table td {
  border: 1px solid #d9d9d9;
  padding: 6px 4px;
  text-align: center;
  vertical-align: middle;
  line-height: 1.4;
}

.detail-table th {
  background: #fafafa;
  font-weight: 500;
  color: #333;
  font-size: 12px;
  position: sticky;
  top: 0;
  z-index: 1;
}

.table-input,
.table-input-number {
  width: 100%;
  border: none;
  padding: 4px 4px;
  text-align: center;
  font-size: 12px;
  background: transparent;
  box-sizing: border-box;
  max-width: calc(100% - 2px);
}

.table-input:focus,
.table-input-number:focus {
  outline: 1px solid #1890ff;
  background: #f0f8ff;
}

.table-input-number {
  text-align: center;
}

.remove-btn {
  background: #ff4d4f;
  color: white;
  border: none;
  padding: 2px 6px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 11px;
}

.remove-btn:hover {
  background: #ff7875;
}

.total-row {
  background: #f0f0f0 !important;
  font-weight: 500;
}

.total-row td {
  background: #f0f0f0 !important;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .quxunqiloufang-container {
    padding: 15px;
  }

  .form-row {
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
  }

  .form-item input {
    width: 100%;
  }

  .form-item-half,
  .form-item-full {
    flex: 1 1 100%;
  }

  .form-item-half .input-wrapper,
  .form-item-full .input-wrapper,
  .form-item-half input,
  .form-item-full input,
  .form-item-half .readonly-text,
  .form-item-full .readonly-text {
    width: 100%;
    min-width: auto;
  }

  .dialog-content {
    width: 95%;
    margin: 10px;
  }

  .detail-dialog {
    max-width: 100%;
    width: 98%;
  }

  .detail-table-wrapper {
    max-height: 300px;
  }

  .detail-table {
    font-size: 11px;
  }

  .detail-table th,
  .detail-table td {
    padding: 4px 2px;
  }

  .data-table {
    font-size: 12px;
  }

  .data-table th,
  .data-table td {
    padding: 6px 4px;
  }

  .operation-btn {
    padding: 1px 4px;
    margin: 0;
    font-size: 11px;
  }
}

/* 复选框样式 */
input[type="checkbox"] {
  cursor: pointer;
}

.allList {
  min-width: 120px;
  height: 40px;
  box-sizing: border-box;
  border: 1px solid black;
  text-align: center;
}

.headContent {
  display: flex;
  align-items: center
}

.allNum {
  display: flex;

}
</style>
